<template>
  <view class="detail-container">
    <!-- 导航栏 -->
    <view class="navbar">
      <text class="navbar-title">报表详情</text>
    </view>

    <scroll-view scroll-y class="detail-content">
      <view class="detail-card">
        <view class="detail-row">
          <text class="detail-label">日期：</text>
          <text class="detail-value">{{ detail.productionDate }}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">车间名称：</text>
          <text class="detail-value">{{ detail.workshopName }}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">生产数量：</text>
          <text class="detail-value">{{ detail.quantityProduced }}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">缺陷数量：</text>
          <text class="detail-value">{{ detail.qualityDefects }}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">班次：</text>
          <text class="detail-value">{{ detail.shift }}</text>
        </view>
        <!-- 根据你的后端数据结构，自由添加更多字段 -->
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      detail: {}
    };
  },
  onLoad(options) {
    // 从列表页跳转过来时，传了 id=? 
    const { id } = options;
    // 调用接口，根据 id 获取这条数据的所有信息
    this.fetchDetail(id);
  },
  methods: {
    fetchDetail(reportId) {
      // 如果后端有单条详情接口，可以直接用 reportId 请求。
      // 这里示例仍用 findList 返回所有数据后，再过滤
      uni.request({
        url: 'http://localhost:1003/mesEmployeeProductionReport/findList',
        method: 'GET',
        success: (res) => {
          if (res.data && res.data.code === 200) {
            // 在 data 数组里找出与 reportId 匹配的那一条
            const found = res.data.data.find(item => item.id == reportId);
            if (found) {
              this.detail = found;
            } else {
              console.error('未找到对应ID的报表：', reportId);
            }
          } else {
            console.error('请求失败：', res.data.msg);
          }
        },
        fail: (err) => {
          console.error('请求错误：', err);
        }
      });
    }
  }
};
</script>

<style scoped>
.detail-container {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  height: 100vh;
}
/* 顶部导航 */
.navbar {
  height: 50px;
  background-color: #1296db;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-title {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
/* 详情内容区 */
.detail-content {
  flex: 1;
  padding: 10px;
}
.detail-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.detail-row {
  display: flex;
  margin-bottom: 10px;
}
.detail-label {
  width: 80px;
  font-size: 14px;
  color: #666;
}
.detail-value {
  font-size: 14px;
  color: #333;
}
</style>
